<template>
	<view style="padding-top: 4rpx;">
		<view class="" style="position: fixed;z-index: 1000;">
			<view class="" style="background-color: #fff;">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<uni-nav-bar @clickLeft="back"  left-icon="back" border="false" title="商家中心"></uni-nav-bar>
<!-- 				<uni-nav-bar @clickLeft="back" @clickRight="tuiguang" left-icon="back" border="false" title="商家中心" rightText="发布任务"></uni-nav-bar> -->
			</view>
			<view class="daohanglan uni-flex">
				<view class="" style="height: 64rpx;">
					<view :class="['title-text',selected==0?'text-selected':'text-no-selected']" @tap="dianji(0)">进行中</view>
					<view :class="[selected==0?'selected':'hide']"></view>
				</view>
				<view class="" style="height: 64rpx;">
					<view :class="['title-text',selected==1?'text-selected':'text-no-selected']" @tap="dianji(1)">已结束</view>
					<view :class="[selected==1?'selected':'hide']"></view>
				</view>
				<!-- <view class="" style="height: 64rpx;">
					<view :class="['title-text',selected==2?'text-selected':'text-no-selected']" @tap="dianji(2)">已取消</view>
					<view :class="[selected==2?'selected':'hide']"></view>
				</view> -->
			</view>
		</view>
		
		<view class="" style="margin-top: 225rpx;">
			<view :class="[selected==0?'':'hide','']" style="position: relative;">

				<view class="" v-if="list0.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>

				<view class="content" v-for="(item,index) in list0" :key="item.id">
					<view class="title-text" style="width: auto;">{{item.title}}</view>
					<!-- <view class="" style="display: flex;flex: 1;justify-content: space-between;">
						<view class="title-text" style="width: auto;color: #FF4D4D;font-size:32rpx;padding-top: 20rpx;">¥{{item.danwei_yongjin}}</view>
						<view class="title-text" style="width: auto;color: #000;font-size:32rpx;padding-top: 20rpx;">¥{{item.pirce}}</view>
					</view> -->

					<view class="">
						<view class="uni-flex one-label">
							<view class="title-text labelcolor">商品价格</view>
							<view class="label-data">¥{{item.pirce}}</view>
						</view>
						<view class="uni-flex one-label">
							<view class="title-text labelcolor">截止日期</view>
							<view class="label-data">{{item.jiezhi_time | dateFormat('YYYY-mm-dd')}}</view>
						</view>
						<view class="uni-flex one-label">
							<view class="title-text labelcolor">所需单数</view>
							<view class="label-data">{{item.danshu}}单</view>
						</view>
						<view class="uni-flex one-label" style="padding-bottom: 30rpx;">
							<view class="title-text labelcolor" style="text-align: left;">已提交</view>
							<view class="label-data">{{item.yitgshNum}}单</view>
						</view>
					</view>
					<view class="uni-flex anniu">
						<view class="" style="flex: 1;color: #3291F8;" @tap="xiajiashow(item.id,index)">下架任务</view>
						<view class="" style="flex: 1;border-left: 1rpx solid #F2F2F2;position: relative;" @tap="toDaishenhePage(item.id,index)">待处理
						<!-- (<text style="color:#FF9500">{{item.weishNum}}</text>单) -->
							 <u-badge type="error" :count="item.tijiaoshenhecount+item.renwushenhecount" :offset="[-8,90]"></u-badge>
							 </view>
					</view>
				</view>
				<!-- <u-loadmore v-if="list0.length!=0" :status="status" :icon-type="iconType" :load-text="loadText" /> -->
			</view>
			<view :class="[selected==1?'':'hide']" style="position: relative;">
				<view class="" v-if="list1.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>

				<view class="content" v-for="(item,index) in list1" :key="item.id">
					<view class="title-text" style="width: auto;">{{item.title}}</view>
					<!-- <view class="" style="display: flex;flex: 1;justify-content: space-between;">
						<view class="title-text" style="width: auto;color: #FF4D4D;font-size:32rpx;padding-top: 20rpx;">¥{{item.danwei_yongjin}}</view>
						<view class="title-text" style="width: auto;color: #000;font-size:32rpx;padding-top: 20rpx;">¥{{item.pirce}}</view>
					</view> -->
					<view class="">
						<view class="uni-flex one-label">
							<view class="title-text labelcolor">商品价格</view>
							<view class="label-data">¥{{item.pirce}}</view>
						</view>
						<view class="uni-flex one-label">
							<view class="title-text labelcolor">截止日期</view>
							<view class="label-data">{{item.jiezhi_time | dateFormat('YYYY-mm-dd')}}</view>
						</view>
						<view class="uni-flex one-label">
							<view class="title-text labelcolor">所需单数</view>
							<view class="label-data">{{item.danshu}}单</view>
						</view>
						<view class="uni-flex one-label" style="padding-bottom: 30rpx;">
							<view class="title-text labelcolor" style="text-align: left;">已提交</view>
							<view class="label-data">{{item.yitgshNum}}单</view>
						</view>
					</view>
					<view class="uni-flex anniu">
						<!-- <view class="" style="flex: 1;color: #3291F8;">下架任务</view> -->
						<view class="" style="flex: 1;border-left: 1rpx solid #F2F2F2;position: relative;" @tap="toDaishenhePage(item.id,index)">待处理
						<!-- (<text style="color:#FF9500">{{item.weishNum}}</text>单) -->
							 <u-badge type="error" :count="item.tijiaoshenhecount+item.renwushenhecount" :offset="[-8,260]"></u-badge>
							 </view>
					</view>
					
				</view>
				<!-- <u-loadmore v-if="list1.length!=0" :status="status" :icon-type="iconType" :load-text="loadText" /> -->
			</view>
		</view>
		<u-toast :type="type" ref="uToast"></u-toast>
		<u-modal v-model="show" content="请问是否下架该任务" @confirm="xiajia()" :show-cancel-button="true"></u-modal>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import util from '@/common/util.js';
	import mLoading from '@/components/m-loading.vue';
	// import listMixin from '@/common/mixins/list-mixin.js';
	export default {
		// mixins: [listMixin],
		components: {
			uniNavBar,
			mLoading
		},
		data() {
			return {
				selected: "0",
				list0: [],
				list1: [],
				list2: [],
				page: 1,
				size: 15,
				type: "success",
				taskStatus: 1,
				uid: uni.getStorageSync("token"),
				daiShenIndex: null,
				show: false,
				xiajiaId: null,
				xiajiaIndex: null,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有了'
				}
			}
		},
		onLoad() {
			//获取初始数据
			var that = this;
			this.page = 1;
			this.$util.nuiAjax(this.$jiekou.shangjiaZhongxin, {
				pageNo: this.page,
				pageSize: this.size,
				taskStatus: this.taskStatus,
				userId: this.uid
			}, function(res) {
				that.list0 = res.list;
				if(that["list" + that.selected].length>=res.count){
					that.status="nomore";
				}
			})
			//监听待审核单数
			uni.$on("jianTingdaishenhe", function(data) {
				that.$util.nuiAjax(that.$jiekou.daiShenheDanshu, {
					myTaskId: data.myTaskId
				}, function(res) {
					that["list" + that.selected][that.daiShenIndex].weishNum = res.count;
					that["list" + that.selected][that.daiShenIndex].danshu = res.xuyaoCount;
					that["list" + that.selected][that.daiShenIndex].yitgshNum = res.yitijiaoCount;
				});
			})

			//监听发布任务
			uni.$on("faburenwu", function(data) {
				that.taskStatus = 1;
				that.page = 1;
				that.$util.nuiAjax(that.$jiekou.shangjiaZhongxin, {
					pageNo: that.page,
					pageSize: that.size,
					taskStatus: that.taskStatus,
					userId: that.uid
				}, function(res) {
					that.list0 = res.list;
				})
			})

		},
		onPullDownRefresh() { //下拉刷新
			var that = this;
			this.page = 1;
			this.$util.nuiAjax(this.$jiekou.shangjiaZhongxin, {
				pageNo: this.page,
				pageSize: this.size,
				taskStatus: this.taskStatus,
				userId: this.uid
			}, function(res) {
				that["list" + that.selected] = res.list;
				uni.stopPullDownRefresh();
				if(that["list" + that.selected].length>=res.count){
					that.status="nomore";
				}
			})
		},
		onReachBottom() { //上拉加载
			if(this.status=="nomore"){
				return;
			}
			var that = this;
			this.status = 'loading';
			this.page = ++ this.page;
			this.$util.nuiAjax(this.$jiekou.shangjiaZhongxin, {
				pageNo: this.page,
				pageSize: this.size,
				taskStatus: this.taskStatus,
				userId: this.uid
			}, function(res) {
				that["list" + that.selected].push(...res.list);
				if(that["list" + that.selected].length>=res.count){
					that.status="nomore";
				}
			})
		},
		methods: {
			toDaishenhePage: function(id, index) {
				this.daiShenIndex = index;
				this.$util.toUrl('../shangjia/daiShenheList?id=' + id);
			},
			xiajiashow: function(id, index) {
				this.show = true;
				this.xiajiaId = id;
				this.xiajiaIndex = index;
			},
			xiajia: function() {
				var that = this;
				that.$util.nuiAjax(this.$jiekou.xiajiaRenwu, {
					taskId: this.xiajiaId
				}, function(res) {
					if (res.result == "true") {
						that.$refs.uToast.show({
							title: "下架成功",
							duration: 500,
							callback: function() {
								that.list0.splice(that.xiajiaIndex, 1);
							}
						});
					} else {
						that.type = "";
						that.$refs.uToast.show({
							title: res.message,
							duration: 700,
						});
					}
				});
			},
			back: function() {
				uni.navigateBack();
			},
			tuiguang: function() {
				var userInfo = uni.getStorageSync("userInfo");
				if (userInfo.attestation != 2) {
					this.$refs.uToast.show({
						title: "请先进行实名认证",
						duration: 700,
					});
					return;
				}
				this.$util.toUrl("./fuburenwu");
			},
			dianji: function(index) {
				this.selected = index;
				var that = this;
				that["list" + index] = [];
				this.status= 'loadmore',
				this.page = 1;
				if (index == 0) {
					this.taskStatus = 1;
				}
				if (index == 1) {
					this.taskStatus = 2;
				}
				if (index == 2) {
					this.taskStatus = 3;
				}
				this.$util.nuiAjax(this.$jiekou.shangjiaZhongxin, {
					pageNo: this.page,
					pageSize: this.size,
					taskStatus: this.taskStatus,
					userId: this.uid
				}, function(res) {
					that["list" + index] = res.list;
					if(that["list" + that.selected].length>=res.count){
						that.status="nomore";
					}
				})


			},
			// getData:function(requestParams) {
			// 	let self = this;
			// 	return new Promise((res, rej) => {
			// 		let params = requestParams;
			// 		if (!params) {
			// 			params = {
			// 				page: 1,
			// 				size: 15
			// 			};
			// 		}
			// 		console.log(params)
			// 		self.$util.nuiAjax(self.$jiekou.shangjiaZhongxin,{pageNo:params.page,pageSize:params.size,taskStatus:self.taskStatus,uid:self.uid},function(data){
			// 			res({
			// 				code: 200,
			// 				data: {
			// 					page: params.page,
			// 					size: params.size,
			// 					list: data.list,
			// 					total: data.count
			// 				}
			// 			});
			// 		})
			// 	});
			// },
			// // 数据请求(没错就是这么少的代码)
			// async _getList:function() {
			// 	// 根据实际情况修改自己修改key 
			// 	console.log(1);
			// 	let result = await this.getData({
			// 		page:this.page, // 传入页码
			// 		size:this.size, // 传入每页条数
			// 	});
			// 	let self = this;
			// 	this.total = result.data.total;
			// 	result.data.list.map(item => {
			// 		self["list"+selected].push(item);
			// 	});
			// }
		},
		filters: {
			dateFormat: (date, str) => {
				if (date != undefined) {
					// date = date.replace(/-/g,"/");
					// date = util.dateUtils.parse(date);
					return util.dateUtils.dateFormat('YYYY-mm-dd', new Date(date));
				}
			}
		}
	}
</script>

<style lang="scss">
	.anniu {
		border-top: #F2F2F2 2rpx solid;
		// height:40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 40px;
		text-align: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	page {
		background-color: $page-bg-color;
		height: 100%;
	}

	.one-label {
		padding-top: 20rpx;
		justify-content: space-between;
	}

	.labelcolor {
		color: #999999;
		text-align: right;
	}

	.hide {
		display: none;
	}

	.daohanglan {
		padding: 24rpx 0 0 0;
		justify-content: space-around;
		background-color: $uni-text-color-inverse;
		// margin-top: 4rpx;
		margin-bottom: 18rpx;
		box-shadow: 0px 8rpx 16rpx 0px rgba(246, 247, 248, 1);
	}

	.selected {
		height: 6rpx;
		background: $uni-color-primary;
		width: 100%;
		margin-top: 18rpx;
	}

	.text-selected {
		color: $uni-color-primary;
	}

	.text-no-selected {
		color: #191919;
	}

	.title-text {
		// width:112rpx;
		// height:40rpx;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.content {
		padding: 30rpx 30rpx 0 30rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}
</style>
